﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>

    <!-- WinJS references -->
    <!--<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>-->

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />
    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"><img src="/images/AppLogoSmall.png" /> <div class="small">by MCNEXT</div></span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div data-win-control="WinJS.UI.Pivot" id="pageHub" class="mcn-fullsize">


                <div class="listviewpivotitem" id="sectionBindings" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'WinJSContrib.Core'}">
                    <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{ layouts: HomeGridLayout }">
                        <div class="sectionSummary">
                            <p>The core package contains many useful bits, like helpers and custom bindings.</p>
                            <p>Those Bindings help provide some common feature (ellipses on text, dates, images, etc). You will also find some two way binding to help you manage dataforms</p>
                        </div>
                        <div class="link" data-page-link="/pages/bindings/objectproperties/objectproperties.html">
                            object properties utilities
                        </div>
                        <div class="link" data-page-link="/pages/bindings/arguments/arguments.html">
                            parameterized bindings
                        </div>
                        <div class="link" data-page-link="/pages/bindings/showhide/showhide.html">
                            bindings for show, hide, disable
                        </div>
                        <div class="link" data-page-link="/pages/bindings/images/images.html">
                            Binding on images
                        </div>
                        <div class="link" data-page-link="/pages/bindings/dates/dates.html">
                            Binding on dates
                        </div>
                        <div class="link" data-page-link="/pages/bindings/twoway/twoway.html">
                            Two way bindings
                        </div>
                        <div class="link" data-page-link="/pages/alerts/alerts.html">
                            Prompt, dialog, alerts, ...
                        </div>
                    </div>
                </div>

                <div class="listviewpivotitem" id="sectionCore" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Custom navigator (WinJSContrib.Navigator', managedLV: true }">
                    <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{ layouts: HomeGridLayout }">
                        <div class="sectionSummary">
                            <p>Our custom navigator adds small features aggregated to your pages through a custom control. This navigator manages a lot more than the one you find in Visual Studio project templates.</p>
                            <p>With this custom navigator, you will have exit page transitions, binding for interactive elements on page's functions, or manage your event listeners to avoid memory leaks.</p>
                            <p>It also introduce some custom page events to help you manage your screens without relying to much on setImmediate or the Scheduler.</p>
                        </div>
                        <div class="link" data-page-link="/pages/core/pageactions/pageactions.html">
                            Page actions and page links
                        </div>
                        <div class="link" data-page-link="/pages/core/pageevents/pageevents.html">
                            custom page events
                        </div>
                        <div class="link" data-page-link="/pages/core/blockingnavigation/blockingnav.html">
                            prevent navigation in a page
                        </div>
                        <div class="link" data-page-link="/pages/core/eventtracker/eventtracker.html">
                            events & Event tracker
                        </div>
                    </div>
                </div>

                <div class="listviewpivotitem" id="sectionListView" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'WinJSContrib.ListViewLayout'}">
                    <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{layouts: HomeGridLayout}">
                        <div class="link big" data-page-link="/pages/listlayout/home.html">
                            <h3>Declarative layout</h3>
                            <p>Ever wanted to manage ListView layouts without code when your screen resize ?</p>
                        </div>
                    </div>
                </div>
              <!--
                <div class="listviewpivotitem" id="sectionGrid" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Grid samples (WinJSContrib.Grid)'}">
                    <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{ layouts: HomeGridLayout }">
                        <div class="sectionSummary">
                            <p>This control helps you layout items based on a grid matrix, or flexbox. With the grid matrix, items will be arranged to fill all spaces.</p>
                            <p>If the grid is used with the custom navigator, you will not even have to think about changing the layout on screen resize.</p>
                        </div>
                        <div class="link" data-page-action="openFixedHub" data-page-action-args='{ "items": "items10", "multipass": false}'>
                            FIXED items
                        </div>
                        <div class="link" data-page-action="openFlexGrid" data-page-action-args='{ "items": "items200", "multipass": "false"}'>
                            grid with flexbox layout (no multipass)
                        </div>
                        <div class="link" data-page-action="openFlexGrid" data-page-action-args='{ "items": "items200", "multipass": "item"}'>
                            grid with flexbox layout
                        </div>
                    </div>
                </div>

                <div class="listviewpivotitem" id="sectionHub" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Hub samples (WinJSContrib.Hub)'}">
                    <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{ layouts: HomeGridLayout }">
                        <div class="sectionSummary">
                            <p>This control is a hub control alternative. It's meant to be used in conjonction with the custom navigator because it relies on the page events to orchestrate the building of the page.</p>
                            <p>When you navigate, the hub remember your position when you get back.</p>
                            <p>If you use grids inside the hub sections, you will be able to use multipass rendereing on the sections or on items to boost performaces</p>
                        </div>
                        <div class="link" data-page-action="openFlexGrid" data-page-action-args='{ "items": "items200", "multipass": "item"}'>
                            Hub with flex layout and 1200 items (no multipass)
                        </div>
                        <div class="link" data-page-action="openHub" data-page-action-args='{ "items": "items20", "multipass": false}'>
                            Hub with 120 items (no multipass)
                        </div>
                        <div class="link" data-page-action="openHub" data-page-action-args='{ "items": "items200", "multipass": false}'>
                            Hub with 1200 items (no multipass)
                        </div>
                        <div class="link" data-page-action="openHub" data-page-action-args='{ "items": "items20", "multipass": "section"}'>
                            Hub with 120 items (multipass / section)
                        </div>
                        <div class="link" data-page-action="openHub" data-page-action-args='{ "items": "items200", "multipass" : "section"}'>
                            Hub with 1200 items (multipass / section)
                        </div>
                        <div class="link" data-page-action="openHub" data-page-action-args='{ "items": "items20", "multipass": "item"}'>
                            Hub with 120 items (multipass / item)
                        </div>
                        <div class="link" data-page-action="openHub" data-page-action-args='{ "items": "items200", "multipass" : "item"}'>
                            Hub with 1200 items (multipass / item)
                        </div>
                    </div>
                </div>

                <div class="listviewpivotitem" id="sectionDataForms" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Forms samples (WinJSContrib.DataForm)'}">
                    <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{ layouts: HomeGridLayout }">
                        <div class="sectionSummary">
                            <p>This control is for managing and styling data forms.</p>
                            <p>It wraps form validation, error notifications, and a small css framework to layout your dataform</p>
                        </div>
                        <div class="link" data-page-link="/pages/dataform/overview/dataform.html">
                            simple forms
                        </div>
                    </div>
                </div>    -->

                <div class="listviewpivotitem" id="sectionDataSource" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Datasource helpers'}">
                    <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{layouts: HomeGridLayout}">
                        <div class="link" data-page-link="/pages/datasources/simple/datasources.html">
                            DataSourceManager <p>helps working with filtered and grouped datasources</p>
                        </div>
                        <div class="link big" data-page-link="/pages/datasources/customcontrol/datasources.html">
                            semantic zoom lists <p>custom control wrapping semantic zoom and listviews with a DataSourceManager</p>
                        </div>
                    </div>
                </div>

                <!--  <div class="listviewpivotitem" id="sectionChildViewFlyout" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'ChildView Flyout (WinJSContrib.ChildViewFlyout)'}">
                     <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{layouts: HomeGridLayout}">
                         <div class="sectionSummary">
                             <p>This control is intended to provide a sub navigation system. A child view is opening as a side flyout and is based on the custom navigator provided in WinJS Contrib.</p>
                             <p>It's very usefull in a lot of user experience scenarios where a WinJS flyout is to small or to limited, like master-detail views, picking an item in a list, etc.</p>
                         </div>
                         <div class="link" data-page-link="/pages/childviewflyout/basics/childviewflyout.html">
                             sub navigation <p>use child view to provide sub-navigation</p>
                         </div>
                         <div class="link" data-page-link="/pages/childviewflyout/picker/childviewflyout.html">
                             item picker <p>use child view for picking some items</p>
                         </div>
                     </div>
                 </div>  -->
                <div class="listviewpivotitem" id="sectionMiscControls" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Other controls'}">
                    <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{layouts: HomeGridLayout}">
                        <div class="link" data-page-link="/pages/tab/tabcontrol.html">
                            tab control <p>loading tabs from external child pages</p>
                        </div>

                        <div class="link" data-page-link="/pages/semanticzoom/semanticzoom.html">
                            semantic zoom wrapper <p>helps implement semantic zoom in your controls</p>
                        </div>
                    </div>
                </div>
                <!--<div class="listviewpivotitem" id="sectionMiscHelpers" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Helpers'}">
                    <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{layouts: HomeGridLayout}">
                        <div class="link big" data-page-link="/pages/multiview/multiview.html">
                            <h3>multi-views</h3>
                            <p>objects to help manage and bootstrap multi-view implementation</p>
                        </div>
                        <div class="link big" data-page-link="/pages/contactcard/contactcard.html">
                            <h3>contact card</h3>
                            <p>show contact card in one line of code</p>
                        </div>
                    </div>
                </div>

                <div class="listviewpivotitem" id="sectionMisc" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Search (WinJSContrib.Search)'}">
                    <h2>Search (WinJSContrib.Search)</h2>
                    <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{layouts: HomeGridLayout}">
                        <div class="link" data-page-link="/pages/search/search.html">
                            index and search content
                        </div>
                    </div>
                </div>-->

                <div class="listviewpivotitem" id="sectionIntro" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'What is it ?', managedLV: true }">
                    <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{ layouts: HomeGridLayout }">
                        <div class="sectionSummary">
                            <p>WinJS Contrib is a set of tools, helpers and controls to complement WinJS, and help you build native HTML5 applications for Windows 8 and Windows Phone 8.1.</p>
                            <p>Embedded in Windows, and soon being available separately, WinJS is a great framework to build your native applications, but it lacks some features that we find valuable for expressiveness or productivity.</p>
                            <p>This application will walk you through most features in the library.</p>
                        </div>
                        <div class="link big" data-page-weblink="http://winjscontrib.codeplex.com">
                            <h3>Check sources on codeplex</h3>
                            <p>All sources for WinJS Contrib libraries and for this app are available on codeplex</p>
                        </div>
                        <div class="link big" data-page-weblink="http://www.nuget.org/packages?q=winjscontrib">
                            <h3>It's modular</h3>
                            <p>All parts are distributed as separate NuGet packages. Take the one that suits your needs.</p>
                        </div>
                        <div class="link big" data-page-weblink="http://www.buildwinjs.com">
                            <h3>Never heard about WinJS ?</h3>
                            <p>Visit WinJS offical website and discover its features.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
</html>
